import * as React from 'react';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Albums from './Shared/Albums';
import Article from './Shared/Article';
import Contacts from './Shared/Contacts';
// @ts-ignore
import TouchableOpacity from 'react-native/Libraries/Components/Touchable/TouchableOpacity';

const tabBarIcon =
  (name: string) =>
  ({ tintColor, horizontal }: { tintColor: string; horizontal: boolean }) => (
    <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
  );

class AlbumsScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Albums',
    tabBarIcon: tabBarIcon('photo-album'),
    tabBarButtonComponent: TouchableOpacity,
  };

  render() {
    return <Albums />;
  }
}

class ArticleScreen extends React.Component {
  static navigationOptions = {
    tabBarLabel: 'Article',
    tabBarIcon: tabBarIcon('chrome-reader-mode'),
    tabBarButtonComponent: TouchableOpacity,
    tabBarVisible: false,
  };

  render() {
    return <Article />;
  }
}

class ContactsScreen extends React.Component {
  static navigationOptions = {
    tabBarTestID: 'Contacts_id',
    tabBarLabel: 'Contacts',
    tabBarIcon: tabBarIcon('contacts'),
    tabBarButtonComponent: TouchableOpacity,
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      // JSON.stringify(navigation.state.routeName) 需要修改
    },
  };

  render() {
    return <Contacts />;
  }
}

class BackHome extends React.Component {
  static navigationOptions = {
    title: 'Back title',
    tabBarVisible: false,
    tabBarIcon: tabBarIcon('home'),
    // tabBarLabel: 'Back',
    tabBarButtonComponent: TouchableOpacity,
    tabBarAccessibilityLabel: 'React.Component',
    tabBarOnPress: ({ navigation, defaultHandler }) => {
      defaultHandler();
      navigation.navigate('Home');
    },
    tabBarOnLongPress: () => {
      console.log('tabBarOnLongPress =====>');
    },
  };

  render(): React.ReactNode {
    return null;
  }
}

export default createBottomTabNavigator(
  {
    Albums: {
      screen: AlbumsScreen,
    },
    Article: {
      screen: ArticleScreen,
    },
    Contacts: {
      screen: ContactsScreen,
    },
    Back: {
      screen: BackHome,
    },
  },
  {
    resetOnBlur: true,
    allowFontScaling: false,
    tabBarOptions: {
      activeTintColor: '#178517ff',
      inactiveTintColor: '#23178dff',
      inactiveBackgroundColor: '#84cf91ff',
      activeBackgroundColor: '#d1237aff',
      showIcon: false,
      showlabel: true,
      style: {
        height: 40,
        backgroundColor: '#4892ceff',
      },
      labelStyle: {
        fontSize: 20,
      },
      safeAreaInset: {
        top: 'never',
        bottom: 'always',
      },
    },
  },
);